<template>
    <div class="box">
        <!-- 提交订单 -->
        <div class="head">
            <div class="head-div" style="width: 56%">
                <div class="head-left">
                    <img src="../assets//tpleft.svg" alt="" @click="back" />
                    <div></div>
                    <img src="../assets/tpright.svg" alt="" @click="homes" />
                </div>
                <div class="head-text">提交订单</div>
            </div>
        </div>
        <!-- 门票名称 -->
        <div class="ticketName">
            {{ route.query.scenic_name }}-{{ route.query.ticket_name }}
        </div>
        <!-- 日期 -->
        <div class="date">
            <!-- 标题 -->
            <div class="date-item">
                <div class="item-title">选择日期</div>
                <div class="item-child">
                    <img src="../assets/03.png" alt="" />请先选择日期
                </div>
            </div>
            <!-- 日期选择 -->
            <div class="dateTime">
                <div class="dateHide">
                    <!-- 可订日期 -->
                    <div class="dateTime-list" v-for="(item, index) in days" :key="index"
                        @click="index !== 0 ? getTime(item.date, index) : ''" :style="{
                        backgroundColor:
                            index === 0 ? '#fff' : activeIndex === index ? '#e0e8f6' : '#fff',
                    }">
                        <span :style="{
                        color: index === 0 ? '#999' : '#000', // 字体颜色
                    }">{{ item.date }}</span>
                        <p :style="{
                        color: index === 0 ? '#999' : '#ff0000', // 字体颜色
                    }">
                            ￥{{ route.query.price }}
                        </p>
                    </div>
                </div>
                <!-- 更多日期 -->
                <div class="moreDates">
                    <div>更多日期</div>
                    <img src="../assets/right.png" alt="" />
                    <div class="leftSup">¥{{ route.query.price }} 起</div>
                </div>
            </div>
            <!-- 购买须知 -->
            <div class="notes">
                <div class="refund">
                    <p>无需退票</p>
                    |
                    <p>随时退</p>
                    |
                </div>
                <div class="need">需携带游客身份证</div>
                <!-- 须知 -->
                <div class="note">
                    <span>购买须知</span> <img src="../assets/right.png" alt="" />
                </div>
            </div>
        </div>
        <!-- 选择数量 -->
        <div class="selectNum">
            <div class="numItem">选择数量</div>
            <van-stepper v-model="numValue" min="1" max="1" disable-input />
        </div>
        <!-- 限购提示 -->
        <div class="restriction">每单限购1张,同一证件当天限购1张</div>
        <!-- 游客信息 -->
        <div class="touristInfo">
            <!-- 标题 -->
            <div class="infoTitle">游客信息</div>
            <div class="infoItem">
                <div class="itemLeft">
                    <div class="leftList">
                        <div>姓</div>
                        <div>名:</div>
                    </div>
                    <div class="leftList">
                        <div>身</div>
                        <div>份</div>
                        <div>证</div>
                        <div>号:</div>
                    </div>
                    <div class="leftList">
                        <div>手</div>
                        <div>机</div>
                        <div>号:</div>
                    </div>
                </div>
                <div class="itemRight">
                    <div class="leftList">
                        <div>{{ useinfo.nickname }}</div>
                    </div>
                    <div class="leftList">
                        <div>{{ useinfo.code == null ? "无" : useinfo.code }}</div>
                    </div>
                    <div class="leftList">
                        <div>{{ useinfo.tel }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部提交 -->
        <div class="footer">
            <!-- 总价 -->
            <div class="total">
                <span class="price">总价</span><span class="unit">￥</span><span class="money">50</span>
            </div>
            <!-- 提交订单按钮 -->
            <div class="submit" @click="submitOrder">提交订单</div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { showSuccessToast, showFailToast } from "vant";
import { add } from "../api/order";
const router = useRouter();
const route = useRoute();
console.log(route.query);
const numValue = ref(1);
// 获取总价
let totalPrice = route.query.price * numValue.value;
const activeIndex = ref(null); // 用于跟踪当前被点击的 div 的索引
// 预约时间
const orderTime = ref(""); // 用于跟踪当前被点击的 div 的索引
let useinfo = JSON.parse(sessionStorage.getItem('useinfo'))
console.log(useinfo.id);
// 返回到首页
const back = () => {
    history.back();
};
const homes = () => {
    router.push({
        path: "/home",
    });
};
const days = []; // 创建一个空数组来存储日期和周几
const currentDate = new Date(); // 获取当前日期
function generateWeekDays() {
    for (let i = 0; i < 7; i++) {
        const dayOfWeek = currentDate.getDay(); // 获取当前日期是周几（0代表周日，1代表周一，依此类推）
        const dayOfMonth = currentDate.getDate(); // 获取当前日期的日
        const month = currentDate.getMonth() + 1; // 获取当前日期的月份（注意月份是从0开始的，所以需要+1）
        const year = currentDate.getFullYear(); // 获取当前日期的年份
        // 生成日期和周几的字符串表示
        const dateStr = `${year}-${month < 10 ? "0" + month : month}-${dayOfMonth < 10 ? "0" + dayOfMonth : dayOfMonth
            }`;
        const weekDayStr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][
            dayOfWeek
        ];

        // 将日期和周几的信息添加到数组中
        days.push({
            date: dateStr,
            weekday: weekDayStr,
        });
        // 更新当前日期为下一天
        currentDate.setDate(currentDate.getDate() + 1);
    }
    return days; // 返回包含日期和周几信息的数组
}
// 调用函数并打印结果
generateWeekDays(); 
console.log(days);
const getTime = (time, index) => {
    console.log(time);
    activeIndex.value = index;
    orderTime.value = time;
};
// 提交订单
const submitOrder = () => {
    console.log(numValue.value);
    if (orderTime.value == "") {
        showFailToast("请选择日期");
    } else {
        console.log(orderTime.value);
        add(
            {
                scenic_id: route.query.scenic_id,
                ticketing_id: route.query.ticketing_id,
                number: numValue.value,
                total_price: totalPrice,
                user_id: useinfo.id,
                time: orderTime.value,
                status: 2,
            },
            { id: useinfo.id }
        ).then((res) => {
            console.log(res);
            if (res.code == 1) {
                showSuccessToast("提交成功,前往支付页");
                router.push({
                    path: "/payment",
                    query: {
                        orderId: res.data,
                    },
                });
            }
        });
    }
};
</script>

<style scoped>
/* 头部 */
.head {
    width: 100%;
    background-color: white;
    padding-bottom: 6.5px;
    padding-top: 6.5px;
    height: 50px;
    border-bottom: 1px solid #d4d4d4;
}

.head-div {
    padding-left: 16px;
    width: 51%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.head-text {
    font-size: 15px;
    color: rgba(80, 80, 80, 1);
}

.head-left {
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 20px;
    height: 32px;
    width: 84px;
    border: 1px solid #e2e2e2;
}

.head-left div {
    background-color: rgba(153, 153, 153, 1);
    width: 1px;
    height: 24px;
}

.head-left img {
    width: 24px;
    height: 24px;
}

/* 门票名称 */
.ticketName {
    padding: 16px;
    font-size: 20px;
    font-weight: 700;
}

/* 日期 */
.date {
    background-color: #fff7f5;
    padding: 3%;
}

.date-item {
    display: flex;
    align-items: center;
}

.date-item img {
    width: 20px;
    height: 20px;
}

.item-title {
    font-size: 20px;
    font-weight: 700;
    color: #505050;
}

.item-child {
    display: flex;
    align-items: center;
    margin-left: 15px;
    color: #d43030;
    font-size: 13px;
}

/* 日期选择 */
.dateTime {
    width: 100%;
    height: 50px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.dateHide {
    height: 50px;
    font-size: 12px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: auto;
}

.dateHide>div {
    min-width: 93px;
    margin-left: 5px;
    height: 96%;
}

.today {
    border-radius: 5px;
    border: 1px solid #999999;
    width: 26%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    color: #999999;
    background-color: #ffffff;
}

.dateTime-list {
    border-radius: 5px;
    border: 1px solid #999999;
    width: 26%;
    height: 96%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    color: #999999;
    background-color: #ffffff;
}

/* 更多日期 */
.moreDates {
    border-radius: 5px;
    border: 1px solid #999999;
    width: 15%;
    height: 96%;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 0 1%;
    position: relative;
}

.moreDates>div {
    width: 40px;
}

.moreDates>img {
    width: 20px;
    height: 20px;
}

.leftSup {
    font-size: 8px;
    text-align: center;
    line-height: 15px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    height: 15px;
    background-color: #ff8d1a;
    color: white;
    width: 70%;
    position: absolute;
    top: -10px;
    left: 0;
}

/* 购买须知 */
.notes {
    margin-top: 15px;
    width: 100%;
    height: 30px;
    background-color: #fff9d9;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

/* 退款 */
.refund {
    width: 34%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

/* 需要 */
.need {
    color: #d43030;
}

/* 须知 */
.note {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.note img {
    width: 15px;
    height: 15px;
}

/* 选择数量 */
.selectNum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
}

.numItem {
    font-size: 20px;
    font-weight: 700;
}

/* 限购提示 */
.restriction {
    margin-top: 10px;
    margin-bottom: 15px;
    width: 88%;
    margin-left: 5%;
    height: 25px;
    background-color: #f4f4f4;
    font-size: 12px;
    line-height: 25px;
    padding-left: 2%;
    border-radius: 10px;
    color: #6a6a6a;
}

/* 游客信息 */
.touristInfo {
    width: 90%;
    height: 180px;
    margin-left: 5%;
}

.infoTitle {
    font-size: 20px;
    font-weight: 700;
}

.infoItem {
    display: flex;
}

.itemLeft {
    height: 80%;
    width: 15%;
    font-size: 12px;
}

.leftList {
    margin: 15px 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.itemRight {
    height: 80%;
    width: 50%;
    font-size: 12px;
    margin-left: 10px;
}

/* 底部 */
.footer {
    width: 100%;
    padding: 0 3%;
    height: 40px;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #d8d8d8;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 总价 */
.price {
    color: #d43030;
    font-size: 13px;
}

.unit {
    color: #d43030;
    font-size: 13px;
}

.money {
    color: #d43030;
    font-size: 20px;
}

/* 提交 */
.submit {
    width: 100px;
    height: 35px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff5733;
    color: #fff;
}
</style>